/*
 *  Home.js
 *  created by qinghong
 *  2016-7-11
 */

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Navigator,
    ScrollView,
    Image,
    TouchableOpacity
} from 'react-native';

import Moment from 'moment';

import NavBar from '../../Common/NavBar';
import Constants from '../../Common/Constants';
import OneUrls from '../../Common/OneUrls';
import ActivityView from '../../Common/ActivityView';
import Button from '../../Common/Button';
import ZanView from '../../Common/ZanView';

export default class Home extends Component {

    constructor(props) {
        super(props);
        this.state = {
            homeData: null,
            loaded: false
        };
    }

    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
        //let date = new Date();
        //let dateStr = `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`;
        //let dateStr = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate();
        let date = Moment().format('YYYY-MM-DD');
        let urlStr = OneUrls.HomeUrls.homeData + '?' + 'strDate=' + date + '&strRow=1';
        fetch(urlStr)
            .then((res) => res.json())
            .then((resData) => {
                this.setState({
                    homeData: resData.hpEntity,
                    loaded: true
                });
            })
            .done();
    }

    render() {
        const { showShareViewAction } = this.props;

        if (!this.state.loaded) {
            return (
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                    <NavBar
                        titleIcon={require('../../images/navLogo.png')}
                        rightIcon={require('../../images/shareBtn.png')}
                        rightAction={showShareViewAction}/>
                    <ActivityView text='正在加载首页数据...'/>
                </View>
            );

        } else {
            let volStr = this.state.homeData.strHpTitle;
            let imgUrl = this.state.homeData.strOriginalImgUrl;

            let nameAuthor = this.state.homeData.strAuthor;
            let array = nameAuthor.split('&');
            var name, author;
            if (array.length == 2) {
                name = array[0];
                author = array[1];
            }

            let dateYear = Moment().format('YYYY');
            let dateMonth = Moment().format('MMM');
            let dateDay = Moment().format('DD');

            let content = this.state.homeData.strContent;
            let contentFontSize = 14.0;
            let contentLineNum = content.length / ((Constants.window.screenWidth * 0.7 - 40) / contentFontSize) + 1;
            let contentHeight = contentLineNum * (contentFontSize + 5) + 10;

            let zanNum = this.state.homeData.strPn;

            return (
                <View style={{justifyContent: 'center', alignItems: 'center'}}>
                    <NavBar
                        titleIcon={require('../../images/navLogo.png')}
                        rightIcon={require('../../images/shareBtn.png')}
                        rightAction={showShareViewAction}/>
                    <ScrollView style={styles.scrollView}
                                showsVerticalScrollIndicator={false}
                                showsHorizontalScrollIndicator={false}>
                        <Text style={styles.volText}>
                            {volStr}
                        </Text>
                        <Image source={{uri: imgUrl}} style={styles.image}/>
                        <Text style={[styles.nameAuthor, {marginTop: 15}]}>{name}</Text>
                        <Text style={styles.nameAuthor}>{author}</Text>
                        <View style={{height: contentHeight, flexDirection: 'row', marginTop: 30}}>
                            <View style={styles.date}>
                                <Text style={{fontSize: 26, color: 'rgb(47,177,253)'}}>{dateDay}</Text>
                                <Text style={{fontSize: 10, marginTop: 5}}>{dateMonth + ' , ' + dateYear}</Text>
                            </View>
                            <View style={styles.content}>
                                <Text numberOfLines={contentLineNum}
                                      style={{marginHorizontal: 10, lineHeight: contentFontSize+5}}>
                                    {content}
                                </Text>
                            </View>
                        </View>
                        <View style={{height: 50, marginTop: 40, justifyContent: 'center', alignItems: 'flex-end'}}>
                            <ZanView zanNum={zanNum} style={styles.zanView}/>
                        </View>
                    </ScrollView>
                </View>
            );
        }
    }
}

const styles = StyleSheet.create({
    scrollView: {
        width: Constants.window.screenWidth,
        height: Constants.window.screenHeight - 64 - 49
    },
    volText: {
        paddingLeft: 10,
        paddingTop: 16,
        fontSize: 14
    },
    image: {
        width: Constants.window.screenWidth - 10,
        height: 260,
        justifyContent: 'center',
        marginLeft: 5,
        marginTop: 30
    },
    nameAuthor: {
        justifyContent: 'flex-end',
        textAlign: 'right',
        fontSize: 13,
        marginRight: 5,
        marginTop: 5
    },
    date: {
        width: Constants.window.screenWidth * 0.3,
        justifyContent: 'center',
        alignItems: 'center'
    },
    content: {
        flex: 1,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'rgb(42,194,244)',
        marginRight: 20
    },
    zanView: {
        height: 36,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        borderColor: 'gray',
        borderRadius: 18,
        borderWidth: 0.5,
        right: -18
    }
});

